/* @import url(../fonts/windows-font.css);

#event-viewer {
   height: 7.5rem;
   width: 15rem;
   resize: both;
}
#event-viewer .open-settings {
   --size: 22px;
   width: var(--size);
   height: var(--size);
   position: absolute;
   right: 5px;
   background-image: url(../images/settings-icon.png);
   background-size: var(--size) var(--size);
   z-index: 2;
   animation: settings-spin 10s linear forwards infinite;
   opacity: 0.8;
   cursor: pointer;
}
@keyframes settings-spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
#event-viewer .open-settings:hover {
   opacity: 1;
   animation-play-state: paused;
}
#event-viewer .open-settings:active {
   opacity: 0.9;
}
#event-viewer-display {
   height: 100%;
   background-color: #333;
   padding: 0.1rem;
   box-shadow: 0 0 10px 4px #000 inset;
   z-index: 1;
   overflow: hidden;
}
.event-viewer-entry {
   font-family: 'Windows';
   font-size: 1rem;
   width: 100%;
   padding: 0.1rem 0.3rem 0;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 65%, rgba(255, 255, 255, 0) 100%);
   text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
   animation: 5s eventAnim forwards linear;
}
@keyframes eventAnim {
   0% {
      opacity: 0;
   }
   5% {
      opacity: 1;
   }
   90% {
      opacity: 1;
   }
   95% {
      font-size: 1rem;
      opacity: 0;
   }
   100% {
      font-size: 0;
      opacity: 0;
   }
}
.event-viewer-entry:not(:last-child) {
   margin-bottom: 0.2rem;
} */

/* LOREM COUNTER */
/* #lorem-counter > .display-container {
   --size: 10.5rem;
   width: var(--size);
   height: var(--size);
}
.display-container[displayType=packets] {
   background-color: #202020;
}
#lorem-count {
   font: 400 4rem "Windows";
   display: inline-block;
   margin: 0;
   padding: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.display-container[displayType=packets] #lorem-count {
   color: rgb(0, 255, 0);
}
.display-container[displayType=lorem] #lorem-count {
   color: rgb(20, 20, 20);
}
.loremCounterAddText {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
} */

#lorem-counter {
   z-index: 2;
}
#lorem-counter .popup-title p {
   margin-right: 28px;
}
#lorem-count {
   margin: 0;
}

#achievement-tracker {
   min-width: 30rem;
}
@media screen and (min-width: 100rem) {
   #achievement-tracker {
      min-width: 60rem;
   }
   #achievement-tracker .formatter {
      display: flex;
   }
   #achievement-tracker .seperator {
      width: 2px;
      background-color: #fff;
      margin: 10px;
      box-shadow: -2px 0 0 0 #000;
   }
   #achievement-tracker .left-column {
      width: 100%;
      max-width: 30%;
      margin: 0 10px 10px;
   }
   #achievement-tracker .right-column {
      width: 100%;
      margin: 0 10px 10px;
   }
}
#achievement-tracker .view-type-container {
   margin-top: 1.3rem;
   display: flex;
   justify-content: space-evenly;
}
#achievement-tracker .view-type {
   height: 28px;
   background-color: #c0c0c0;
   padding: 0.2rem 1rem;
   border: 2px solid;
   border-top-color: #000;
   border-right-color: #eee;
   border-bottom-color: #eee;
   border-left-color: #000;
   margin: 3px;
   cursor: pointer;
   box-shadow: 2px 2px 0 0 #999 inset, -2px -2px 0 0 #d5d5d5 inset;
   position: relative;
}
#achievement-tracker .view-type:hover {
   background-color: #c6c6c6;
   box-shadow: 2px 2px 0 0 #999 inset, -2px -2px 0 0 #dadada inset;
}
#achievement-tracker .view-type:active {
   background-color: #bdbdbd;
   box-shadow: 2px 2px 0 0 #999 inset, -2px -2px 0 0 #ccc inset;
}
#achievement-tracker .view-type .name {
   color: #777;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -100%);
}
#achievement-tracker .view-type img {
   width: 28px;
   height: 28px;
   margin-left: 50%;
   transform: translateX(-50%);
   opacity: 0.8;
   user-select: none;
}
#achievement-tracker .view-type.selected {
   background-color: #d5d5d5;
   border-top-color: #fff;
   border-right-color: #000;
   border-bottom-color: #000;
   border-left-color: #fff;
   box-shadow: 2px 2px 0 0 #ddd inset, -2px -2px 0 0 #999 inset, 4px 4px 0 0 #999;
}
#achievement-tracker .view-type.selected:hover {
   background-color: #dadada;
   
}
#achievement-tracker .view-type.selected:active {
   background-color: #d0d0d0;

}
#achievement-tracker .view-type.selected .name {
   color: #000;
   text-decoration: underline;
}
#achievement-tracker .view-type.selected img {
   opacity: 1;
}



#achievement-tracker .filter-list {
   padding: 0;
   list-style-type: none;
}
#achievement-tracker .filter-list li {
   height: 2rem;
   line-height: 2rem;
   font-size: 1rem;
   margin: 3px 0;
   padding-left: 5px;
   cursor: pointer;
   user-select: none;
}
#achievement-tracker .filter-list li:hover {
   background-color: #dadada;
   animation: growFilter 0.1s linear forwards;
}
#achievement-tracker .filter-list li:not(:hover) {
   animation: shrinkFilter 0.1s linear forwards;
}
#achievement-tracker .filter-list li:active {
   background-color: #c5c5c5;
}
#achievement-tracker .filter-list li.selected {
   height: calc(2rem - 4px);
   line-height: calc(2rem - 4px);
   font-size: 1.1rem;
   font-weight: bold;
   background-color: #ddd;
   border: 2px solid;
   border-top-color: #fff;
   border-right-color: #000;
   border-bottom-color: #000;
   border-left-color: #fff;
   animation: none;
   cursor: default;
}
#achievement-tracker .filter-list li.selected::before {
   content: "> ";
}
@keyframes growFilter {
   from {
      font-size: 1rem;
      margin-left: 5px;
   }
   to {
      font-size: 1.1rem;
      margin-left: 10px;
   }
}
@keyframes shrinkFilter {
   from {
      font-size: 1.1rem;
      margin-left: 10px;
   }
   to {
      font-size: 1rem;
      margin-left: 5px;
   }
}



.achievement-container.strips .achievement {
   color: #fff;
   background-color: #666;
   padding: 2px 5px;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
}
.ct-95 .achievement-container.strips .achievement {
   border: 2px solid;
   border-top-color: #fff;
   border-right-color: #000;
   border-bottom-color: #000;
   border-left-color: #fff;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.7) inset;
}
.ct-xp .achievement-container.strips .achievement {
   border: 2px solid #000;
   border-radius: 5px;
   box-shadow: -2px -2px 0 0 #888 inset, 2px 2px 0 0 #fff inset, 0 0 10px 5px rgba(0, 0, 0, 0.7) inset;
}
.achievement-container.strips .achievement:not(:last-child) {
   margin-bottom: 0.3rem;
}
.achievement-container.strips .achievement * {
   margin: 0;
   z-index: 1;
}
.achievement-container.strips .achievement > div {
   margin-left: 5px;
}
.achievement-container.strips p {
   text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000;
}
.achievement-container.strips p.message {
   font-style: italic;
   text-shadow: none;
}
.achievement-container.strips .name {
   font-weight: bold;
}
.achievement-container.strips .achievement.unlocked {
   color: #000;
   background-color: #ccc;
   background-image: none;
   box-shadow: none;
}
.ct-xp .achievement-container.strips .achievement.unlocked {
   box-shadow: -2px -2px 0 0 #888 inset, 2px 2px 0 0 #fff inset;
}
.achievement-container.strips .achievement.unlocked p {
   text-shadow: none;
}
.achievement-container.strips .bg {
   width: 200%;
   background-image: url(../images/win95/button-bg-striped.png);
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0.6;
   z-index: 0;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.7) inset;
   animation: bgSlide 40s linear infinite;
}
@keyframes bgSlide {
   from {
      transform: translateX(-50%);
   }
   to {
      transform: translateX(0%);
   }
}



#achievement-tracker .achievement-container.grid {
   background-color: #aaa;
   border: 2px solid;
   border-top-color: #eee;
   border-right-color: #666;
   border-bottom-color: #666;
   border-left-color: #eee;
   padding: 3px;
   margin: 3px;
}
#achievement-tracker .achievement-container.grid .achievement {
   width: 48px;
   height: 48px;
   background-color: #aaa;
   padding: 2px;
   border: 2px solid;
   border-top-color: #000;
   border-right-color: #eee;
   border-bottom-color: #eee;
   border-left-color: #000;
   margin: 2px;
   display: inline-block;
}
#achievement-tracker .achievement-container.grid .achievement > div {
   display: none;
}
#achievement-tracker .achievement-container.grid .achievement.unlocked {
   background-color: #ccc;
   border-top-color: #fff;
   border-right-color: #000;
   border-bottom-color: #000;
   border-left-color: #fff;
}

.achievement img {
   width: 48px;
   height: 48px;
   background-color: #888;
   box-shadow: 0 0 20px 3px #333 inset, 0 0 10px 2px #000 inset;
}